<template>
  <view class="shadow p-4 bg-white">
    <view class="flex justify-between items-center mb-4">
      <view>
        <text class="font-bold text-base">
          {{ data.name || '' }}
        </text>
        <text class="room-location">
          {{ data.roomNumber || ''}}
        </text>
      </view>
      <view>
        <text class="status-text">
          开启中
        </text>
      </view>
    </view>
    <view class="grid gap-4 grid-cols-5 items-center justify-center">
      <view class="col-span-1">
        <image
          style="width: 108rpx; height: 108rpx;"
          src="/static/icons/aircondition.png"
        ></image>
      </view>
      <view class="flex items-center self-stretch col-span-3">
        <view class="flex items-center">
          <text>
            预设温度
          </text>
          <image src="/static/icons/temp.png" class="icon mr-2">
          </image>
          <text>
            26℃
          </text>
        </view>
      </view>
      <view class="flex justify-center items-center col-span-1">
        <image
          style="width: 48rpx; height: 48rpx;"
          src="/static/icons/on.png"
          class="w-full"
        >
        </image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  }
}
</script>

<style lang="scss" scoped>
.icon {
  width: 38rpx;
  height: 38rpx;
}

.status-text {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(0, 219, 144, 1);
  opacity: 1;
}

.room-location {
  margin-left: 18rpx;
  color: #808695;
  width:129rpx;
  height:40rpx;
  font-size:28rpx;
  font-family:PingFang SC;
  font-weight:400;
  line-height:40px;
}
</style>
